<template>
    <div id="statistics" v-loading="loading">
        <header>
            <div class="title">
                <h1>{{$store.state.tree.name || '__'}}</h1>
                <time>统计分析 / {{level[$store.state.tree.level]}}维度</time>
            </div>
            <total :id="$route.params.id" :data="total"/>
        </header>
        <section>
            <div class="sift">
                条件筛选
                <div class="tools">
                    <el-date-picker v-model="date" type="month" @change="selectDate" placeholder="选择日期" value-format="yyyy-MM" />
                    <button class="btn" @click="date=''"><i class="ri-refresh-line"></i>重置</button>
                </div>
            </div>

            <el-collapse accordion v-model="active" @change="clickTab">
                <el-collapse-item name="0">
                    <template slot="title">
                        <i class="ri-article-line"></i>
                        {{current.substr(0,4)||'全'}}年全{{level[$store.state.tree.level]}}用电累计
                    </template>
                    <table class="table" border="1">
                        <tr><td>全年用电累计</td><td>{{data[0].usedYdl || 0}} KW·h</td></tr>
                        <tr><td>全年计划用电</td><td>{{data[0].planYdl || 0}} KW·h</td></tr>
                        <tr><td>占比统计</td><td>{{data[0].planYdl?data[0].usedYdl*100/data[0].planYdl:0}}%</td></tr>
                    </table>
                    <div class="chart" id="chart0"></div>
                </el-collapse-item>
                <el-collapse-item name="1">
                    <template slot="title">
                        <i class="ri-article-line"></i>
                        {{year}}年全{{level[$store.state.tree.level]}}分类用电
                    </template>
                    <table class="table" border="1">
                        <tr v-for="x in data[1]"><td>{{x.ywName || "__"}}</td><td>{{x.usedYdl || 0}}</td></tr>
                    </table>
                    <div class="chart" id="chart1"></div>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <i class="ri-article-line"></i>
                        {{year}}年全{{level[$store.state.tree.level]}}用电量走势图
                    </template>
                    <div class="chart" style="width: 100%" id="chart2"></div>
                </el-collapse-item>
                <el-collapse-item name="3">
                    <template slot="title">
                        <i class="ri-article-line"></i>
                        {{year}}年{{level[$store.state.tree.level+1]}}用电累计
                    </template>
                    <div class="chart" style="width: 100%" id="chart3"></div>
                </el-collapse-item>
                <el-collapse-item name="4">
                    <template slot="title">
                        <i class="ri-article-line"></i>
                        {{current.split('-').join('年')||'当'}}月{{level[$store.state.tree.level+1]}}用电累计
                    </template>
                    <div class="chart" style="width: 100%" id="chart4"></div>
                </el-collapse-item>
            </el-collapse>
        </section>
    </div>
</template>

<script type="text/ecmascript-6">
    let echarts=require('echarts');
    import Total from '../../component/Total'
    export default {
        data() {
            return {
                level:['市','分公司','营服中心','机楼','机房'],
                tab:'',
                date:new Date().toJSON().substr(0,7),
                active:'0',
                data:{0:{},1:[],2:{},3:[],4:[]},
                current:'',
                total: {
                    machineRoomCount:{name: '机房数量', class: ''},
                    conditionerCount:{name: '空调数量', class: 'air-conditioner'},
                    totalEnergyCount:{name: '总能耗', class: 'all-energy'},
                    yearEnergyCount:{name: '本年能耗', class: 'year-energy'},
                    monthEnergyCount:{name: '本月能耗', class: 'month-energy'},
                    alarmCount:{name: '报警次数', class: 'warning'},
                },
                loading:false,
            }
        },
        mounted(){
            this.selectDate();
        },
        methods:{
            selectDate(){
                if(!this.date)return ;
                this.loading=true;
                this.data={0:{},1:[],2:{},3:[],4:[]};
                let obj={deptId:this.$route.params.id,date:this.date+'-01'};
                this.current=this.date;
                this.$axios.statistics.room_monitor0(obj).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.data[0]=v.data;
                        this.clickTab(0)
                    }
                });
                this.$axios.statistics.room_monitor1(obj).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.data[1]=v.data;
                        this.clickTab(1)
                    }
                });
                this.$axios.statistics.room_monitor2(obj).then(v=>{
                    this.loading=false;
                    let data=eval("("+v+")");
                    if(data.code==200){
                        let array=data.data,date=[],line=[],obj={};
                        for(let k in array){
                            if(k==='allDeviceMonthYdl'){
                                for (let k1 in array[k]) {
                                    date.push(k1);
                                    line.push(array[k][k1])
                                }
                            }else {
                                let arr=[];
                                for (let k1 in array[k]) {
                                    arr.push(array[k][k1])
                                }
                                obj[k]=arr;
                            }
                        }
                        this.data[2]=[date,obj,line];
                        this.clickTab(2)
                    }
                });
                this.$axios.statistics.room_monitor3(obj).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.data[3]=v.data;
                        this.clickTab(3)
                    }
                });
                this.$axios.statistics.room_monitor4(obj).then(v=>{
                    this.loading=false;
                    if(v.code==200){
                        this.data[4]=v.data;
                        this.clickTab(4)
                    }
                });
            },
            clickTab(v){
                let data=this.data[v],id='chart'+v;
                if(v==='')return ;
                if(v==0){
                    this.pieChart(data,id);
                }else if(v==1){
                    this.barChart(data,id);
                }else if(v==2){
                    this.lineBarChart(data,id)
                }else{
                    this.rowBarChart(data,id)
                }
            },
            pieChart(data,id){
                this.$nextTick(e=>{
                    let myChart=echarts.init(document.getElementById(id));
                    myChart.setOption({
                        tooltip:{trigger:"item"},
                        color: ['#FDCE74','#39CF85'],
                        legend: {
                            orient: 'vertical',
                            right:'5%'
                        },
                        series: [{
                            hoverOffset: 15,
                            labelLine: {normal: {show: false}},
                            type: 'pie',
                            radius:100,
                            label: {show: false},
                            data: [
                                {value: data.usedYdl || 0, name: '全年用电累计'},
                                {value: data.planYdl?data.planYdl*1-data.usedYdl*1:0, name: ''},
                            ]
                        }]
                    },true);
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: 0
                    });
                })
            },
            barChart(data,id){
                this.$nextTick(e=>{
                    let myChart=echarts.init(document.getElementById(id));
                    myChart.setOption({
                        tooltip:{trigger:"axis",axisPointer: {type: 'shadow'}},
                        grid: {
                            top:'10%',
                            left: '3%',
                            right: '1%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: data.map(o=>o.ywName || '__'),
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10
                        },
                        yAxis: {
                            name:'单位 KW·h',
                            scale:true,
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        series: [{
                            type: 'bar',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}]
                                )
                            },
                            data: data.map(o=>o.usedYdl)
                        }]
                    },true);
                    myChart.resize();
                })
            },
            lineBarChart(data,id){
                this.$nextTick(e=>{
                    let legend=[],series=[];
                    for(let k in data[1]){
                        legend.push(k);
                        series.push({
                            type: 'bar',
                            name:k,
                            stack:'类型',
                            data:data[1][k]
                        })
                    }
                    legend.push('总计');
                    series.push({
                        type: 'line',
                        name:'总计',
                        data:data[2],
                        showAllSymbol: true,
                        symbolSize:7
                    });
                    let myChart=echarts.init(document.getElementById(id),'light');
                    myChart.setOption({
                        tooltip:{trigger:"axis",axisPointer: {type: 'shadow'}},
                        xAxis: {
                            type: 'category',
                            data: data[0].map(o=>o+'月'),
                            axisTick: {alignWithLabel: true,show:false},
                            axisLine: {
                                show: false
                            }
                        },
                        legend:{
                            data:legend
                        },
                        grid: {
                            top:60,
                            left:'1%',
                            right: '1%',
                            bottom: '3%',
                            containLabel: true
                        },
                        yAxis:{
                            axisLine: {show: false},
                            axisTick: {show: false},
                            name:'单位 KW·h',
                            type: 'value',
                        },
                        series:series
                    },true);
                    myChart.resize();
                })
            },
            rowBarChart(data,id){
                this.$nextTick(e=>{
                    let myChart=echarts.init(document.getElementById(id),'light');
                    let arr=[...data].reverse();
                    myChart.setOption({
                        tooltip:{trigger:"axis",axisPointer: {type: 'shadow'}},
                        xAxis: {
                            type: 'value',
                            axisTick: {show: false},
                            axisLine: {show: false},
                            name:'单位 KW·h',
                            position:"top",
                            nameLocation:"start",
                            nameGap:10,
                            splitLine:{lineStyle:{type:'dash',color:'#ddd'}}
                        },
                        grid: {
                            top:'1%',
                            left:'4%',
                            right: 70,
                            bottom: '1%',
                            containLabel: true,
                            scale:true
                        },
                        yAxis: {
                            type: 'category',
                            data: arr.map(o=>o.name),
                            axisTick: {show: false},
                            axisLine: {
                                lineStyle:{color:'#ddd'}
                            },
                            axisLabel:{
                                color:'#333'
                            },
                            splitLine:{show:true}
                        },
                        series: [{
                            data:  arr.map(o=>o.usedYdl),
                            type: 'bar',
                            barCategoryGap:0,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    1, 0, 0, 0,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            }
                        }]
                    },true);
                    myChart.resize();
                })
            }
        },
        components:{Total},
        watch:{
            '$route.params.id'(){
                this.selectDate();
            }
        },
        computed:{
            year(){
                return this.current.substr(0,4)||'全'
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    #statistics {
        background: #fff;
        padding: 20px ;
        header{
            overflow: hidden;
            .title{
                float: left;
                h1{
                    font-size: 32px;
                    margin: 20px 0 10px;
                }
                time{
                    color: #777;
                    font-size: 17px;
                }
            }
            .total{
                float: right;
                height: 100px;
                display: flex;
                align-items: center;
                li{
                    padding: 0 20px;
                    display: flex;
                    align-items: center;
                    border-right: 1px solid #eaeaea;
                    .icon{
                        height: 65px;
                        width: 65px;
                        margin: 0 5px 0 0;
                        float: left;
                    }
                    .count{
                        float: left;
                        font-size: 13px;
                        line-height:18px;
                        p{
                            padding:5px 0 0;
                            font-size: 25px;
                            line-height: 25px;
                            color: #ff6600;
                        }
                    }
                }
            }
        }
        section{
            margin: 20px 0 0;
            border:1px solid #DCDFE6;
            .sift{
                height: 60px;
                line-height: 60px;
                background: #f5f5f5;
                padding: 0 25px;
                font-size: 14px;
                border-bottom: 1px solid #DCDFE6;
                .tools{
                    float: right;

                    .el-input__inner{
                        border: 1px solid #aaa;
                        background: linear-gradient(to bottom,#fff,#ededed 83%,#fff);
                        box-shadow: 0 0 4px rgba(0,0,0,.1);
                        .el-range-input{
                            background: none;
                        }
                    }
                    .el-date-editor{
                        margin: 0 0 0 15px;
                        .el-range-separator{
                            width: auto
                        }
                    }
                }

            }
            .el-collapse{
                .el-collapse-item__header{
                    height: 65px;
                    line-height: 65px;
                    background: #f5f5f5;
                    padding: 0 20px 0 25px;
                    font-size: 16px;
                    &>i:first-child{
                        font-size: 35px;
                        color: #0CB4FA;
                        margin: 0 10px 0 0;
                    }
                    &.is-active{
                        border-bottom: 1px dashed #DCDFE6;
                    }
                }
                .el-collapse-item__content{
                    padding:15px 30px;
                    overflow: hidden;
                    .el-tabs{
                        float: left;
                        width: 230px;
                        .el-tabs__nav{
                            border-left:1px solid #eee;
                            border-top:1px solid #eee;
                            .el-tabs__item{
                                height: 50px;
                                line-height: 50px;
                                text-align: left;
                                width: 200px;
                                position: relative;
                                &:after{
                                    content:'';
                                    display: block;
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 1px;
                                    background: #eee;
                                }
                                &.is-active{
                                    color: #333;
                                    font-weight: bold;
                                    background: #e8f0ff;
                                }
                            }
                        }
                        &+.chart{
                            width: calc(~'100% - 230px');
                            height: 450px;
                        }
                    }
                    .table{
                        float: left;
                        width: 400px;
                        border: 1px solid #eee;
                        height: 300px;
                        td{
                            padding: 0 15px;
                            vertical-align: middle;
                            &:nth-child(2n-1){
                                background: #f8f9fc;
                                width: 150px;
                            }
                        }
                    }
                    .chart{
                        float: right;
                        width: calc(~'100% - 430px');
                        height: 300px;
                    }
                }
            }
        }
    }
</style>
